<template>
  <div>
    <p>数字数组</p>
    <span v-for="(item,index) in nums" :key="index">{{ item }} => {{ index }}<br></span>

    <p>对象数组</p>
    <ul>
      <li v-for="(item) in goodList" :key="item.id">商品名称：{{ item.name }} => 价格：{{ item.price }}<br></li>
    </ul>


    <p>遍历对象</p>
      <span v-for="(value,key,index) in obj" :key="index">
        {{ value }} =>  {{ key }} => {{ index }}
        <br>
      </span>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  const nums = ref([1,2,3,4,5])
  const obj = ref({
    id: 1,
    name:'zs',
    age:15
  })
  const goodList = [
    {
      id:1,
      name: '羊毛',
      price: 122
    },
    {
      id:2,
      name:'笔记本',
      price:5666
    },
    {
      id:3,
      name:'苹果',
      price:23
    }
  ]
</script>

<style>

</style>